/*要求:
绑定合适的事件处理函数，实现以下逻辑：

当用户勾上“全选”时，自动选中所有语言，并把“全选”变成“全不选”；

当用户去掉“全不选”时，自动不选中所有语言；

当用户点击“反选”时，自动把所有语言状态反转（选中的变为未选，未选的变为选中）；

当用户把所有语言都手动勾上时，“全选”被自动勾上，并变为“全不选”；

当用户手动去掉选中至少一种语言时，“全不选”自动被去掉选中，并变为“全选”。
    
     1.先把全选和全不选分开；
    2.设计用户点击全选和全不选单选框的事件；
    3.设计用户点击反选的事件；
    4.设计用户点击单选框时的事件
*/

'use strict';
var
    forms = $('#test-form'),//JQUERY
    langs = forms.find('[name=lang]'),//操作DOM
    selectAll = forms.find('label.selectAll :checkbox'),//全选全不选
    selectAllLabel = forms.find('label.selectAll span.selectAll'),//全选
    deselectAllLabel = forms.find('label.selectAll span.deselectAll'),//全不选
    invertSelect = forms.find('a.invertSelect');//反选

forms.find('*').show().off();
forms.find(':checkbox').prop('checked', false).off();
deselectAllLabel.hide();

forms.off().submit(function (e) {
    e.preventDefault();
    alert(forms.serialize());
});

selectAll.change(function () {//当`<input>`、`<select>`或`<textarea>`的内容改变时触发
    if (this.checked) {//选择当前勾上的单选框和复选框，用这个选择器可以立刻获得用户选择的项目
        langs.prop('checked', true);
        deselectAllLabel.show();//全不选显示
        selectAllLabel.hide();//全选隐藏
    } else {
        langs.prop('checked',false);
        selectAllLabel.show();//全选显示
        deselectAllLabel.hide();//全不选隐藏
    }
})
invertSelect.click(function () {
    langs.map(function () {
        $(this).prop('checked', !$(this).prop('checked'));
        // 当用户点击“反选”时，自动把所有语言状态反转（选中的变为未选，未选的变为选中）
    })
})

langs.map(function () {
    $(this).map(function () {
        if($('[name=lang]:checked').length==5){
            selectAll.prop('checked',true);
            deselectAllLabel.show();
            selectAllLabel.hide();
        }else{
            selectAll.prop('checked',false);
            selectAllLabel.show();
            deselectAllLabel.hide();
        }
    })
})